<template>
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="sizes, prev, pager, next, jumper,total"
        :total="total"
        @update:current-page="handleCurrentPageChange"
        @update:page-size="handlePageSizeChange"
    />
</template>

<script setup>
const props = defineProps(["currentPage","pageSize","total"])
const emits = defineEmits(["update:currentPage","update:pageSize","update:projectList","update:loading"])
//api
import {getProjectListByHostApi} from "@/apis/project";

//当前页
const handleCurrentPageChange = async currentPage => {
    emits("update:loading",true)
    const res = await getProjectListByHostApi(currentPage,props.pageSize)
    emits("update:projectList",res.data.records)
    emits('update:currentPage',currentPage)
    emits("update:loading",false)
}

//页面大小
const handlePageSizeChange = async pageSize => {
    emits("update:loading",true)
    const res = await getProjectListByHostApi(props.currentPage,pageSize)
    emits("update:projectList",res.data.records)
    emits('update:pageSize',pageSize)
    emits("update:loading",false)
}

</script>

<style scoped>
.el-pagination {
    justify-content: center;
}
</style>